var TableColSetting = function () {
  var template = /* html */ `
    <div class="table-col-setting" v-loading.fullscreen.lock="loading">
      <div style="margin-bottom:10px">
        <el-button size="medium" type="primary" @click="ensure">确定</el-button>
      </div>
      <div class="table-col-setting-table-div">
        <el-table border fit :data="tableColList" style="width:100%" empty-text="暂无配置数据">
          <el-table-column label="物料类型" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <el-select filterable v-model="scope.row.materialType" size="mini" class="setting-input">
                <el-option v-for="item in materialTypeList" :key="item" :value="item"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="配置内容" min-width="500px" header-align="center">
            <template slot-scope="scope">
              <check-group :key="scope.row.id" :data="scope.row.columns" :size="4"></check-group>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="delConfig(scope.row)">删除</el-button>
            </template>
          </el-table-column>

          <template slot="append">
            <div class="add-row" :class="{'has-data':tableColList.length>0}" :style="{width:tableWidth}" @click="addConfig">
              <i class="el-icon-plus"></i>
              <span>新增配置</span>
            </div>
          </template>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },

    data: function () {
      return {
        loading: false,
        tableColList: [],
        materialTypeList: [],
        tableWidth: '100%'
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setMaterialTypeList().then(function () {
        self.setTableConfigData();
        self.tableWidthEvent();
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setMaterialTypeList: function () {
        var dropdownOption = this.dropdownOption;
        var materialTypeList = dropdownOption.materialTypeList;
        if (materialTypeList !== undefined) {
          this.materialTypeList = materialTypeList;
          return Promise.resolve(materialTypeList);
        }

        var self = this;
        return ajaxRequest('companyMaterialType/getCompanyMaterialTypeListByPage', {
          status: 1
        }, false).then(function (res) {
          var materialTypeList = res.returnData;
          materialTypeList = _.map(materialTypeList, 'materialType');
          materialTypeList = _.uniq(materialTypeList);
          materialTypeList = SysUtil.sortDataByField(materialTypeList);
          self.materialTypeList = materialTypeList;
          dropdownOption.materialTypeList = materialTypeList;
          return materialTypeList;
        });
      },

      setTableConfigData: function () {
        var colList = BusinessOrderFormModel.tableCol;
        var config = this.config;
        var tableColList = [];
        for (var materialType in config) {
          var showCol = config[materialType];
          var columns = [];
          for (var i = 0; i < colList.length; i++) {
            var col = colList[i];
            var id = col.id;
            var checked = showCol.indexOf(id) !== -1;
            columns.push({
              id: id,
              label: col.label,
              checked: checked
            });
          }
          tableColList.push({
            id: SysUtil.getId(),
            materialType: materialType,
            columns: columns
          });
        }
        this.tableColList = tableColList;
      },

      addConfig: function () {
        var colList = BusinessOrderFormModel.tableCol;
        var columns = [];
        for (var i = 0; i < colList.length; i++) {
          var col = colList[i];
          columns.push({
            id: col.id,
            label: col.label,
            checked: false
          });
        }

        var tableCol = {
          id: SysUtil.getId(),
          materialType: '',
          columns: columns
        };
        this.tableColList.push(tableCol);
      },

      delConfig: function (tableCol) {
        var tableColList = this.tableColList;
        var index = _.findIndex(tableColList, {
          id: tableCol.id
        });
        if (index > -1) {
          tableColList.splice(index, 1);
        }
      },

      ensure: function () {
        var tableColList = this.tableColList;
        var tableColObj = {};
        for (var i = 0; i < tableColList.length; i++) {
          var tableCol = tableColList[i];
          var materialType = tableCol.materialType;
          if (tableColObj[materialType] !== undefined) {
            this.$alert('设置的物料类型有重复', '信息');
            return;
          }

          if (materialType === '') {
            this.$alert('请选择物料类型', '信息');
            return;
          }

          var columns = tableCol.columns;
          columns = _.filter(columns, {
            checked: true
          });
          if (columns.length === 0) {
            var msg = `物料类型为${materialType}，至少配置一项显示`;
            this.$alert(msg, '信息');
            return;
          }
          columns = _.map(columns, 'id');
          tableColObj[materialType] = columns;
        }

        this.loading = true;
        var self = this;
        return ModuleUtil.saveMaterialTypeConfig(tableColObj).then(function () {
          self.$emit('update:config', tableColObj);
          self.$emit('setting-success', tableColObj);
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      tableWidthEvent: function () {
        var self = this;
        this.$nextTick(function () {
          var $table = $(this.$el).find('.el-table__header-wrapper table');
          $table.resize(function () {
            self.setTableWidth();
          });
          self.setTableWidth();
        });
      },

      setTableWidth: function () {
        var self = this;
        this.$nextTick(function () {
          var $table = $(this.$el).find('.el-table__header-wrapper table');
          var tableWidth = $table.width();
          if (tableWidth === null) {
            return;
          }
          self.tableWidth = tableWidth + 'px';
        });
      }
    },

    components: {
      CheckGroup: CheckGroup
    },

    template: template
  };
}();
